<template>
    <el-form style="width: 100%;" label-position="left">
        <el-form-item label="标题">
            <el-input v-model='form.product_title'></el-input>
        </el-form-item>

        <el-form-item label="价格">
            <el-input v-model='form.product_price'></el-input>
        </el-form-item>
        <el-form-item label="描述">
            <el-input v-model='form.product_dics'></el-input>
        </el-form-item>
        <el-form-item>
            <div>
                <el-button type="primary" @click="submit">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
    import { findProduct } from '@/api/product.js'
    export default {
        data() {
            return {
                form: {
                    product_title: '',
                    product_price: '',
                    product_dics: ''
                }
            }
        },
        watch: {
            form: {
                deep: true,
                handler(newVal) {
                    let flag = Object.keys(newVal).every((itemKey) => {
                        return newVal[itemKey] === ''
                    })
                    if (flag) {
                        this.$parent.pruductInit()
                    }
                }
            }
        },
        methods: {
            submit() {
                let flag = Object.keys(this.form).every((itemKey) => {
                    return this.form[itemKey] === ''
                })
                if (!flag) { // 有搜索值才搜索
                    findProduct(this.form).then(res => {
                        console.log("查找成功：", res.data)
                        let {page} = res.data
                        console.log('page =>',page)
                        let resultData = res.data.data
                        this.$emit('input', resultData)
                        this.$emit('getPage',page)
                    }).catch(err => {
                        console.log('查找失败：', err)
                    })
                } else {
                    this.$parent.pruductInit()
                }

            },
            reset() {
                this.form = {
                    product_title: '',
                    product_price: '',
                    product_dics: ''
                }
                this.$parent.pruductInit()
            }
        },
    }
</script>